<template>
  <div class="student-detail" v-loading="loading">
    <el-link
      class="app-back"
      icon="el-icon-back"
      type="primary"
      @click="$router.push('/school/student-list')"
      >返回</el-link
    >
    <Panel title="注册信息" icon="zhucechenggong">
      <el-row class="info-row">
        <el-col :span="8">
          <span class="info-label">{{ $tLabel('student.studentCode') }}</span>
          <span class="info-text">{{ detailData.studentCode }}</span>
        </el-col>
        <el-col :span="8">
          <span class="info-label">{{ $tLabel('field.registerTime') }}</span>
          <span class="info-text">{{ detailData.registerTime }}</span>
        </el-col>
        <el-col :span="8">
          <span class="info-label">{{ $tLabel('field.lastLoginTime') }}</span>
          <span class="info-text">{{ detailData.lastLoginTime }}</span>
        </el-col>
      </el-row>
      <el-row class="info-row">
        <el-col :span="8">
          <span class="info-label">{{ $tLabel('student.idCode') }}</span>
          <span class="info-text">{{ detailData.idCode }}</span>
        </el-col>
      </el-row>
    </Panel>
    <Panel title="基本信息" icon="jibenxinxi">
      <div class="avatar">
        <img src="@/assets/img/avatar-default.png" alt="" />
        <span class="student-name">{{ detailData.name }}</span>
      </div>
      <el-row class="info-row">
        <el-col :span="8">
          <span class="info-label">{{ $tLabel('student.studentNumber') }}</span>
          <span class="info-text">{{ detailData.studentNumber }}</span>
        </el-col>
        <el-col :span="8">
          <span class="info-label">{{ $tLabel('student.age') }}</span>
          <span class="info-text">{{ detailData.age }}</span>
        </el-col>
        <el-col :span="8">
          <span class="info-label">{{ $tLabel('student.sex') }}</span>
          <span class="info-text">{{ detailData.sex }}</span>
        </el-col>
      </el-row>
      <el-row class="info-row">
        <el-col :span="8">
          <span class="info-label">{{ $tLabel('student.school') }}</span>
          <span class="info-text">{{ detailData.schoolName }}</span>
        </el-col>
        <el-col :span="8">
          <span class="info-label">{{ $tLabel('student.className') }}</span>
          <span class="info-text">{{ detailData.className }}</span>
        </el-col>
        <el-col :span="8">
          <span class="info-label">{{ $tLabel('student.major') }}</span>
          <span class="info-text">{{ detailData.major }}</span>
        </el-col>
      </el-row>
      <el-row class="info-row">
        <el-col :span="8">
          <span class="info-label">{{ $tLabel('student.mobile') }}</span>
          <span class="info-text">{{ detailData.mobile }}</span>
        </el-col>
        <el-col :span="8">
          <span class="info-label">{{
            $tLabel('student.urgentContactName')
          }}</span>
          <span class="info-text">{{ detailData.urgentContactName }}</span>
        </el-col>
        <el-col :span="8">
          <span class="info-label">{{
            $tLabel('student.urgentContactMobile')
          }}</span>
          <span class="info-text">{{ detailData.urgentContactMobile }}</span>
        </el-col>
      </el-row>
      <div class="photos">
        <div class="photo-title">身份证头像面：</div>
        <div class="photo-img">
          <img
            :src="detailData.idCardFrontUrl"
            alt=""
            v-if="detailData.idCardFrontUrl"
          />
          <template v-else>
            <SvgIcon class="empty-icon" name="tixing1" />
            <div class="empty-text">还未上传图片</div>
          </template>
        </div>
        <div class="photo-title">身份证国徽面：</div>
        <div class="photo-img">
          <img
            :src="detailData.idCardBackUrl"
            alt=""
            v-if="detailData.idCardBackUrl"
          />
          <template v-else>
            <SvgIcon class="empty-icon" name="tixing1" />
            <div class="empty-text">还未上传图片</div>
          </template>
        </div>
        <div class="photo-title">手持证件照：</div>
        <div class="photo-img hand">
          <img
            :src="detailData.idCardHandUrl"
            alt=""
            v-if="detailData.idCardHandUrl"
          />
          <template v-else>
            <SvgIcon class="empty-icon" name="tixing1" />
            <div class="empty-text">还未上传图片</div>
          </template>
        </div>
      </div>
      <div class="approval-btns" v-permission="'student:approval'">
        <el-button
          size="small"
          type="primary"
          @click="rejectStudent()"
          v-if="detailData.approvalStatus != 2"
          >驳回认证</el-button
        >
        <el-button
          size="small"
          type="primary"
          @click="passStudent()"
          v-if="detailData.approvalStatus != 1"
          >通过认证</el-button
        >
      </div>
    </Panel>
    <div class="app-back">
      <el-button
        size="small"
        type="primary"
        @click="$router.push('/school/student-list')"
        >返回</el-button
      >
    </div>
    <ApprovalReason ref="approvalReason" />
  </div>
</template>

<script>
import ApprovalReason from './ApprovalReason'
import { Panel } from 'components'
import { getStudentDetail, approvalStudent } from 'services/school/student'
export default {
  name: 'StudentDetail',
  components: { ApprovalReason, Panel },
  data() {
    return {
      loading: false,
      detailData: {},
      passed: true,
      reason: null,
      studentId: ''
    }
  },
  methods: {
    async getDetail() {
      try {
        this.loading = true
        const id = this.studentId
        const { data } = await getStudentDetail({ id })
        this.detailData = data
      } finally {
        this.loading = false
      }
    },
    async passStudent() {
      const studentId = this.studentId
      const passed = true
      await approvalStudent({ studentId, passed })
      this.$router.push('/school/student-list')
    },
    rejectStudent() {
      const studentId = this.studentId
      const passed = false
      this.$refs.approvalReason.show({ studentId, passed })
    }
  },
  created() {
    this.studentId = this.$route.params.id
    this.getDetail()
  }
}
</script>

<style lang="scss" scoped>
@import 'styles/common.scss';
.student-detail {
  .panel {
    margin-top: 0.2rem;
    &:first-child {
      margin-top: 0;
    }
  }
  .info-label {
    // width: 150px;
  }
  .avatar {
    display: flex;
    align-items: center;
    img {
      @include circle(100px);
    }
    .student-name {
      margin-left: 0.33rem;
      font-size: 22px;
    }
  }
  .photos {
    margin-top: 0.43rem;
  }
  .photo-title {
    margin-top: 0.3rem;
    color: $colorText1;
  }
  .photo-img {
    margin-top: 11px;
    width: 306px;
    height: 180px;
    background: #f6f6f6;
    border: 1px solid #eeeeee;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #aaa;
    overflow: hidden;
    &.hand {
      width: 306px;
      height: 303px;
    }
    .empty-icon {
      font-size: 32px;
    }
    .empty-text {
      margin-top: 23px;
      font-size: 12px;
    }
    img {
      width: 100%;
    }
  }
  .approval-btns {
    margin: 0.3rem 0;
  }
}
</style>
